<script setup lang="ts">



import {ref} from "vue"
import {useRouter} from "vue-router";

const isCollapse = ref(true)

const router = useRouter();

const cancel =  () => {
  router.push('/');
  alert('退出登录');
}

</script>

<template>
  <table style="width: 100%;height: 60px">
    <tr >
      <th  style=" text-align: left ;">
        <el-radio-group  v-model="isCollapse">
          <el-radio-button :value="false">expand</el-radio-button>
          <el-radio-button :value="true">expand</el-radio-button>
        </el-radio-group>
      </th>
      <th width="100px" style="font-size: large"><span>山水有🌤</span></th>
      <th width="100px"  style="text-align: right">
        <el-dropdown>

          <el-avatar  shape="circle" style="width: 40px;height: 40px; margin-top:8px;" src="src/views/img.png" />
          <template #dropdown>
            <el-dropdown-menu >
              <el-dropdown-item>
                <router-link to="/" style="text-decoration: none; color: #606266">登录</router-link>
              </el-dropdown-item>
              <el-dropdown-item @click="cancel" >
                登出
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </th>
    </tr>
  </table>
</template>

<style scoped>

</style>